<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">个人信息</h2>

    <div style="margin: 3% 5% 3% 5%;">

      <!-- 个人详情信息 -->
      <el-card style="padding-bottom: 1%;">
        <div>
          <el-button type="primary" @click="dialogFormVisible = true" style="float: right;">修改密码</el-button>
          <el-descriptions class="margin-top" title="详情" :column="3" size="large" border>
            <!-- 姓名 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  姓名
                </div>
              </template>
              {{ stuInfo.stuName }}
            </el-descriptions-item>
            <!-- 性别 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  性别
                </div>
              </template>
              {{ stuInfo.stuSex }}
            </el-descriptions-item>
            <!-- 电话 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  电话
                </div>
              </template>
              {{ stuInfo.stuPhone }}
            </el-descriptions-item>
            <!-- 学号 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  学号
                </div>
              </template>
              {{ stuInfo.stuId }}
            </el-descriptions-item>
            <!-- 班级 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  班级
                </div>
              </template>
              {{ stuInfo.className }}
            </el-descriptions-item>
            <!-- 专业 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  专业
                </div>
              </template>

              {{ stuInfo.classMajorName }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

      </el-card>

      <!-- 对话框 -->
      <el-dialog v-model="dialogFormVisible" title="修改密码">
        <!-- 修改密码 -->
        <div style="margin: 3% 5% 3% 5%;">
          <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;">
            <el-form :label-position="right" label-width="100px" style="width: 60%">
              <el-form-item label="旧密码" size="large">
                <el-input show-password style="width: 100%" v-model="passwordObj.oldPassword" />
              </el-form-item>
              <el-form-item label="新密码" size="large">
                <el-input show-password style="width:100%" v-model="passwordObj.newpassword" />
              </el-form-item>
              <el-form-item label="重复新密码" size="large">
                <el-input show-password style="width: 100%" v-model="passwordObj.againPassword" />
              </el-form-item>
            </el-form>
          </div>
          <el-row :gutter="20" style="margin-top: 1%;">
            <el-col :span="6" :offset="9">
              <el-button type="primary" @click="changePwd">提交</el-button>
              <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-col>
          </el-row>
        </div>
      </el-dialog>

    </div>

  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { onBeforeMount } from 'vue';
import requests from '@/api/ajax';
import router from '@/router';
import { ElMessage } from 'element-plus';

onBeforeMount(() => {

  //请求能够发出组队邀请的学生信息
  const asd = requests({ url: "/students/detil", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    stuInfo.value = res.rdata
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

// 数据
const stuInfo = ref({
  stuId: "",
  stuName: "",
  stuSex: "",
  classId: "",
  stuIdentity: "",
  stuCollege: "",
  stuPhone: "",
  attendedDate: "",
  stuPassword: "",
  classMajorName: "",
  className: "",
  classGraduateDate: ""
})

//修改密码
const passwordObj = ref({
  oldPassword: '',
  newpassword: '',
  againPassword: '',
})

let dialogFormVisible = ref(false)

function changePwd() {
  if (passwordObj.value.newpassword == passwordObj.value.againPassword) {
    const password = ref({
      oldPass: '',
      newPass: ''
    })
    password.value.newPass = passwordObj.value.newpassword
    password.value.oldPass = passwordObj.value.oldPassword
    const changePassword = requests({ url: "/students/updatePassword", method: "put", data: password.value }).then(res => {
      if (res.code === 20031) {
        ElMessage.success(res.msg)
        dialogFormVisible.value = false
        router.push('/')
      } else if (res.code === 20030) {
        alert(res.msg)
        dialogFormVisible.value = false
      } else {
        alert('服务器错误')
      }

    })
      .catch(err => {
        console.error(err);
        // 登录请求失败后的操作
      });
  }else  {
    ElMessage.error('重复密码错误！');
  }


}

</script>
<style>
.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>